<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <div class="mian-body">
        <div class="input">
            <input type="text" placeholder="请输入要搜索的歌曲关键字" id="inputOne" value="">
            <button id="button"></button>
        </div>
        <div class="searchMsg">
        </div>
        <div class="songList">

        </div>
    </div>
    <script>
        // var inputOne = document.getElementById("inputOne");
        // var inputOne = document.getElementsByTagName("input");
        // var inputOne = document.querySelectorAll(".input input");
        // console.log(inputOne);
        // console.log(typeof(inputOne) );
        // inputOne.onkeydown = function(){
        //     if(event.keyCode==13){
        //         console.log(event.keyCode);
        //         deal()
        //     }
        // }
        var getValue = decodeURIComponent(location.search.split("=")[1]) ;//提取输入的关键字,,decodeURIComponent解码
        
        // 第一次进入传入的参数，并且执行搜索
        $("#inputOne").val(getValue);
        deal()
        
        $("#button").click(function(){deal()});
        $("#inputOne").keydown(function(){
            if(event.keyCode==13){
                // console.log(event.keyCode);
                deal()
            }
        })
        function deal(){
            var key = $("#inputOne").val();
            var url =`http://192.168.4.18:3000/search?keywords=${key}&type=10`;
            $(".songList").html("");
            $(".searchMsg").html("");
            $.ajax({
                method:"get",
                url:url,
                success:function(item){
                    var albums = item.result.albums;
                    // console.log(albums[0].picUrl);
                    
                    for(let i=0;i<albums.length;i++){
                        // console.log(albums[i].id);
                        var html =`
                            <div class="song">
                                <a href="">
                                    <img class="songImg" src=${albums[i].picUrl} alt="">
                                    <span class="songCoverImg"></span>
                                </a>
                                <a href=""><p class="songName">${albums[i].name}</p></a>
                                <a href=""><p class="songer">${albums[i].artist.name}</p></a>
                            </div>
                            `
                        $(".songList").append(html);
                    }
                    var title=`<p>搜索到"${key}"，找到<span class="searchMsg-nub">${albums.length}</span>张专辑</p>`
                    $(".searchMsg").append(title);
                }
            })
        }
    </script>
</body>
</html>